---
import BaseLayout from "../../layouts/BaseLayout.astro";

// 作品集数据
const portfolioItems = [
  {
    id: "1",
    title: "Web Development Portfolio",
    date: "Mar 06, 2025",
    description: "A comprehensive showcase of modern web development projects using React, Vue, and Astro frameworks.",
    image: "/img/top/pic_pray.jpg",
    tags: ["React", "Vue", "Astro", "TypeScript"],
    href: "/ports/web-development",
  },
  {
    id: "2",
    title: "Mobile App Design",
    date: "Feb 03, 2025",
    description: "User-centered mobile application designs focusing on intuitive interfaces and seamless user experiences.",
    image: "/img/top/pic_visit.jpg",
    tags: ["UI/UX", "Mobile", "Figma", "Prototyping"],
    href: "/ports/mobile-app-design",
  },
  {
    id: "3",
    title: "UI/UX Design Projects",
    date: "Nov 19, 2024",
    description: "Creative design solutions for various digital platforms, emphasizing user experience and visual aesthetics.",
    image: "/img/top/pic_learn.jpg",
    tags: ["Design", "UX Research", "Wireframing", "Visual Design"],
    href: "/ports/ui-ux-design",
  },
  {
    id: "4",
    title: "E-commerce Platform",
    date: "Oct 15, 2024",
    description: "Full-stack e-commerce solution with modern payment integration and inventory management.",
    image: "/img/top/pic_location.jpg",
    tags: ["E-commerce", "Full-stack", "Payment", "Database"],
    href: "/ports/ecommerce-platform",
  },
];
---

<BaseLayout
  title="PORTS | Portfolio"
  description="Explore my creative works and professional projects."
  pageClass="page-sub page-ports"
>
  <div id="main">
    <section id="head" class="section1_1">
      <h1>PORTS</h1>
      <p class="lead">Explore my creative works and professional projects</p>
    </section>
    
    <section class="portfolio-grid">
      <div class="section_wrap">
        <div class="portfolio-container">
          {portfolioItems.map((item) => (
            <article class="portfolio-item">
              <a href={item.href} class="portfolio-link">
                <div class="portfolio-image">
                  <img 
                    src={item.image} 
                    alt={item.title}
                    width="400"
                    height="300"
                    loading="lazy"
                  />
                </div>
                <div class="portfolio-content">
                  <div class="portfolio-meta">
                    <time class="portfolio-date">{item.date}</time>
                  </div>
                  <h2 class="portfolio-title">{item.title}</h2>
                  <p class="portfolio-description">{item.description}</p>
                  <div class="portfolio-tags">
                    {item.tags.map((tag) => (
                      <span class="tag">{tag}</span>
                    ))}
                  </div>
                </div>
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  </div>
</BaseLayout>

<style>
.portfolio-grid {
  padding: 60px 0;
}

.portfolio-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.portfolio-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.portfolio-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.portfolio-image {
  position: relative;
  overflow: hidden;
  height: 250px;
}

.portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.portfolio-item:hover .portfolio-image img {
  transform: scale(1.05);
}

.portfolio-content {
  padding: 30px;
}

.portfolio-meta {
  margin-bottom: 10px;
}

.portfolio-date {
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

.portfolio-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 15px 0;
  color: #333;
  line-height: 1.3;
}

.portfolio-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.portfolio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  background: #f0f0f0;
  color: #555;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .portfolio-container {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 15px;
  }
  
  .portfolio-content {
    padding: 20px;
  }
  
  .portfolio-title {
    font-size: 20px;
  }
}
</style>
